/*
 * @Author: master
 * @Date: 2021-09-14 18:47:55
 * @LastEditTime: 2022-04-13 15:53:14
 * @Description: 媒体服务
 */
/**
 * canvas元素视频录制并下载
 * @param {*} id 元素id
 * @returns new (stream: MediaStream, options?: MediaRecorderOptions)
 */
export const canvasRecordVideo = id => {
  if (!id) {
    throw Error('请传入id');
  }
  const canvas = document.getElementById(id);
  if (canvas instanceof HTMLElement) {
    try {
      // 创建视频流
      const stream = canvas.captureStream();
      // 存储视频流
      const recorder = new MediaRecorder(stream, { mimeType: 'video/webm' });
      // 存储生成的视频流
      const streamData = [];
      // 存储事件
      recorder.ondataavailable = event => {
        if (event?.data?.size) {
          streamData.push(event.data);
        }
      };
      /**
       * 视频存储完成
       */
      recorder.onstop = () => {
        // 转换二进制流置访问地址
        const url = URL.createObjectURL(new Blob(streamData, { type: 'video/webm' }));
        const aLink = document.createElement('a');
        aLink.href = url;
        aLink.download = '视频.map4';
      };
      return recorder;
    } catch (e) {
      console.error(e);
    }
  }
  throw Error('请传递正确的dom元素');
};
/**
 * rtc录屏功能
 * @param {String} recordId
 * @param {String} canvasId
 */
export class WebRtcRecordVideo {
  constructor(recordId, canvasId) {
    this.isRecordingStarted = false;
    this.isStoppedRecording = false;
    if (!recordId) {
      throw Error('请传入需要录制元素id');
    }
    if (!canvasId) {
      throw Error('请传入画布id');
    }
    try {
      this.elementToRecord = document.getElementById(recordId);
      this.canvas2d = document.getElementById(canvasId);
      this.context = this.canvas2d.getContext('2d');
      this.canvas2d.width = this.elementToRecord.clientWidth;
      this.canvas2d.height = this.elementToRecord.clientHeight;

      // 存储视频流
      const stream = this.canvas2d.captureStream();
      this.recorder = new MediaRecorder(stream);
      // 存储生成的视频流
      const streamData = [];
      // 存储事件
      this.recorder.ondataavailable = event => {
        if (event?.data?.size) {
          streamData.push(event.data);
        }
      };
      /**
       * 视频存储完成
       */
      this.recorder.onstop = () => {
        // 转换二进制流置访问地址
        const url = URL.createObjectURL(new Blob(streamData));
        const aLink = document.createElement('a');
        aLink.href = url;
        aLink.download = '要情指令录屏.map4';
        aLink.dispatchEvent(new MouseEvent('click', { bubbles: true, cancelable: true, view: window })); // 兼容火狐
      };
    } catch (e) {
      console.error(e);
    }
  }

  start() {
    const html2canvas = require('html2canvas');
    this.isStoppedRecording = false;
    this.isRecordingStarted = true;
    const looper = () => {
      if (!this.isRecordingStarted) {
        return setTimeout(looper, 5);
      }
      html2canvas(this.elementToRecord, { logging: false }).then(canvas => {
        this.context.clearRect(0, 0, this.canvas2d.width, this.canvas2d.height);
        this.context.drawImage(canvas, 0, 0, this.canvas2d.width, this.canvas2d.height);

        if (this.isStoppedRecording) {
          return;
        }
        requestAnimationFrame(looper);
      });
    };
    looper();
    this.recorder.start();
  }

  stop() {
    this.isRecordingStarted = false;
    this.isStoppedRecording = true;
    this.recorder.stop();
  }
}
